<template>
  <div class="data-board" :style="{ zoom: autoZoom }">
    <div class="overview-panel">
      <RepTitle :is-border="true">
        <template #title>
          <span> 数据总览 </span>
        </template>
        <template #right>
          <el-select v-model="activeOverview" class="m-2" placeholder="请选择" style="width: 120px">
            <el-option
              v-for="item in overviewSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </RepTitle>
      <el-row style="margin-top: 60px">
        <el-col :span="4">
          <div class="overview-item">
            <div class="overview-title">
              <div class="title">收发存</div>
            </div>
            <div class="overview-body">
              <div class="overview-list">
                <div class="label">收料：</div>
                <div class="value">{{ sendReceiveCom.receiveValue }}万元</div>
              </div>
              <div class="overview-list">
                <div class="label">发料：</div>
                <div class="value">{{ sendReceiveCom.sendValue }}万元</div>
              </div>
              <div class="overview-list">
                <div class="label">库存：</div>
                <div class="value">{{ sendReceiveCom.inventoryValue }}万元</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="overview-item">
            <div class="overview-title flex justify-between items-center p80">
              <div class="title">成本占比</div>
              <div class="total-rate">整体占比：{{ costRateCom.totalValue }}</div>
            </div>
            <div class="overview-body flex flex-wrap">
              <div class="overview-list w-1/2">
                <div class="label">公路：</div>
                <div class="value">{{ costRateCom.roadValue }}</div>
              </div>
              <div class="overview-list w-1/2">
                <div class="label">水利：</div>
                <div class="value">{{ costRateCom.waterValue }}</div>
              </div>
              <div class="overview-list w-1/2">
                <div class="label">铁路：</div>
                <div class="value">{{ costRateCom.railwayValue }}</div>
              </div>
              <div class="overview-list w-1/2">
                <div class="label">房建：</div>
                <div class="value">{{ costRateCom.buildValue }}</div>
              </div>
              <div class="overview-list w-1/2">
                <div class="label">市政：</div>
                <div class="value">{{ costRateCom.municipalValue }}</div>
              </div>
              <div class="overview-list w-1/2">
                <div class="label">地铁：</div>
                <div class="value">{{ costRateCom.railroadValue }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="overview-item after0">
            <div class="overview-title flex justify-between items-center p80">
              <div class="title">两级物贸</div>
              <div class="total-rate">整体占比：{{ twoLevelSubstanceCom.totalValue }}</div>
            </div>
            <div class="overview-body flex flex-wrap">
              <div class="overview-list w-1/2 flex items-center">
                <div class="label"> <div class="react"></div></div>
                <div class="value active">钢材</div>
              </div>
              <div class="overview-list w-1/2 flex items-center">
                <div class="label"> <div class="react"></div> </div>
                <div class="value active">水泥</div>
              </div>
              <div class="overview-list w-1/2">
                <div class="label">物资公司占比：</div>
                <div class="value">{{ twoLevelSubstanceCom.oilCompanyValue }}</div>
              </div>
              <div class="overview-list w-1/2">
                <div class="label">物资公司占比：</div>
                <div class="value">{{ twoLevelSubstanceCom.cementCompanyValue }}</div>
              </div>
              <div class="overview-list w-1/2">
                <div class="label">中铁物贸占比：</div>
                <div class="value">{{ twoLevelSubstanceCom.oilRailwayValue }}</div>
              </div>
              <div class="overview-list w-1/2">
                <div class="label">中铁物贸占比：</div>
                <div class="value">{{ twoLevelSubstanceCom.cementRailwayValue }}</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="overview-item last">
            <div class="overview-title">
              <div class="title">供应商</div>
            </div>
            <div class="overview-body">
              <div class="overview-list">
                <div class="label width90">总数：</div>
                <div class="value">{{ supplierCom.totalValue }}</div>
              </div>
              <div class="overview-list">
                <div class="label width90">压减数量：</div>
                <div class="value">{{ supplierCom.useingValue }}个</div>
              </div>
              <div class="overview-list">
                <div class="label width90">压减比例：</div>
                <div class="value">{{ supplierCom.reduceValue }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <div class="chart-panel">
          <RepTitle :is-border="true">
            <template #title>
              <span> 场站节超 </span>
            </template>
            <template #right>
              <el-cascader
                :options="stationFestivalOptions"
                :show-all-levels="false"
                placeholder="请选择"
                v-model="stationFestivalType"
                style="width: 120px; margin-right: 20px"
                @change="handleTopLast5"
              />
              <el-select
                v-model="stationFestivalCommontType"
                class="m-2"
                placeholder="请选择"
                style="width: 120px"
                @change="handleTopLast5"
              >
                <el-option
                  v-for="item in commonOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </RepTitle>
          <div class="chart-box flex">
            <div class="chart-item">
              <RepStationFestivalBar ref="stationFestivalTop5Ref" />
            </div>
            <div class="chart-item">
              <RepStationFestivalBar ref="stationFestivalLast5Ref" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-panel">
          <RepTitle :is-border="true">
            <template #title>
              <span> 近半年趋势 </span>
            </template>
            <template #right>
              <el-select
                v-model="activePriceTrend"
                class="m-2"
                placeholder="请选择"
                style="width: 120px"
                @change="handlePriceTrend"
              >
                <el-option
                  v-for="item in priceTrendOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </RepTitle>
          <div class="chart-item !w-full">
            <RepPriceTrendLine ref="RepPriceTrendLineRef" />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-panel">
          <RepTitle :is-border="true">
            <template #title>
              <span> 重点工号 </span>
            </template>
            <template #right>
              <el-select
                v-model="jobKeyType"
                class="m-2"
                placeholder="请选择"
                style="width: 120px"
                @change="handleJobKeyTopLast5"
              >
                <el-option
                  v-for="item in keyJobOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select
                v-model="jobKeyCommontType"
                class="m-2"
                placeholder="请选择"
                style="width: 120px"
                @change="handleJobKeyTopLast5"
              >
                <el-option
                  v-for="item in commonOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </RepTitle>
          <div class="chart-box flex">
            <div class="chart-item">
              <RepStationFestivalBar ref="jobKeyTop5Ref" />
            </div>
            <div class="chart-item">
              <RepStationFestivalBar ref="jobKeyLast5Ref" />
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-panel">
          <RepTitle :is-border="true">
            <template #title>
              <span> 六价对比 </span>
            </template>
            <template #right>
              <el-select
                v-model="activeSexPrice"
                class="m-2 z-36"
                placeholder="请选择"
                style="width: 120px"
                @change="handleSexPrice"
              >
                <el-option
                  v-for="item in sexPriceOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </RepTitle>
          <div class="chart-item !w-full">
            <div class="sexprice-table h-full">
              <div class="sexprice-header flex">
                <div class="flex15">项目名称</div>
                <div class="flex1">结算价</div>
                <div class="flex1">指导价</div>
                <div class="flex1">市场价</div>
                <div class="flex1">物资公司价</div>
                <div class="flex1">投标价</div>
                <div class="flex1">相邻标段价</div>
              </div>
              <div class="scroll">
                <Vue3Marquee :vertical="true" class="!w-full" :pause-on-hover="true" :duration="5">
                  <div class="scroll-item flex" v-for="(item, index) in sexPriceTable" :key="index">
                    <div class="flex15">
                      <el-popover
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        :content="item.name"
                      >
                        <template #reference>
                          <span>
                            {{
                              item.name.length > 4 ? item.name.substring(0, 7) + '...' : item.name
                            }}</span
                          >
                        </template>
                      </el-popover>
                    </div>
                    <div class="flex1">{{ item.settlementPrice }}</div>
                    <div class="flex1">{{ item.guidePrice }}</div>
                    <div class="flex1">{{ item.marketPrice }}</div>
                    <div class="flex1">{{ item.companyPrice }}</div>
                    <div class="flex1">{{ item.bidPrice }}</div>
                    <div class="flex1">{{ item.adjoinPrice }}</div>
                  </div>
                </Vue3Marquee>
              </div>
              <!-- <div class="scroll">
                <div class="scroll-list">
                  <div class="scroll-item flex" v-for="(item, index) in sexPriceTable" :key="index">
                    <div class="flex15">{{ item.name }}</div>
                    <div class="flex1">{{ item.settlementPrice }}</div>
                    <div class="flex1">{{ item.guidePrice }}</div>
                    <div class="flex1">{{ item.marketPrice }}</div>
                    <div class="flex15">{{ item.companyPrice }}</div>
                    <div class="flex1">{{ item.bidPrice }}</div>
                    <div class="flex15">{{ item.adjoinPrice }}</div>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, nextTick } from 'vue'
import { Vue3Marquee } from 'vue3-marquee'

import RepTitle from './dataBoardQuantityProceComponents/repTitle/index.vue'
import RepStationFestivalBar from './dataBoardQuantityProceComponents/repStationFestivalBar/index.vue'
import RepPriceTrendLine from './dataBoardQuantityProceComponents/repPriceTrendLine/index.vue'
import { overviewSelect, sendReceive, costRate, twoLevelSubstance, supplier } from './index'
import {
  commonOptions,
  stationFestivalOptions,
  stationFestivalLastX,
  stationFestivalTop5,
  stationFestivalLast5,
  stationFestivalTop5Avg,
  stationFestivalLast5Avg
} from './index'
import {
  keyJobOption,
  keyJobX,
  keyJobLastX,
  keyJobTop5,
  keyJobLast5,
  keyJobTop5Avg,
  keyJobLast5Avg
} from './index'
import { priceTrendOptions, priceTrendData } from './index'
import { sexPriceOption, sexPriceData } from './index'
const activeOverview = ref('1')

defineOptions({ name: 'DataBoardQuantityPrice' })

const autoZoom = computed(() => {
  return window.innerWidth / 1920
})

// 数据总览
const sendReceiveCom = computed(() => {
  return sendReceive[activeOverview.value]
})
const costRateCom = computed(() => {
  return costRate[activeOverview.value]
})
const twoLevelSubstanceCom = computed(() => {
  return twoLevelSubstance[activeOverview.value]
})
const supplierCom = computed(() => {
  return supplier[activeOverview.value]
})

// 厂站节超

// 通用下拉
const stationFestivalCommontType = ref('1')
// 分类下拉
const stationFestivalType = ref(['bhzjc', 'shuini'])
// top5
const stationFestivalTop5Ref = ref()
// last5
const stationFestivalLast5Ref = ref()

// 重点工号

// 通用下拉
const jobKeyCommontType = ref('1')
// 分类下拉
const jobKeyType = ref('zjhnt')
// top5
const jobKeyTop5Ref = ref()
// last5
const jobKeyLast5Ref = ref()
onMounted(() => {
  handleTopLast5()
  handleJobKeyTopLast5()
  handlePriceTrend()
  handleSexPrice()
})

// 场站节超
function handleTopLast5() {
  const top5 = stationFestivalTop5
    .filter(
      (ele) =>
        ele.commonType == stationFestivalCommontType.value &&
        ele.stationFestivalType == stationFestivalType.value[1]
    )
    .sort((a, b) => a.value - b.value)
  const avgTop5 = stationFestivalTop5Avg.find(
    (ele) =>
      ele.commonType == stationFestivalCommontType.value &&
      ele.stationFestivalType == stationFestivalType.value[1]
  )
  stationFestivalTop5Ref.value.init({
    top5,
    stationFestivalX: top5.map((ele) => ele.name),
    avgTop5
    // isAverage: true
  })

  const last5 = stationFestivalLast5
    .filter(
      (ele) =>
        ele.commonType == stationFestivalCommontType.value &&
        ele.stationFestivalType == stationFestivalType.value[1]
    )
    .sort((a, b) => a.value - b.value)
  const avgLast5 = stationFestivalLast5Avg.find(
    (ele) =>
      ele.commonType == stationFestivalCommontType.value &&
      ele.stationFestivalType == stationFestivalType.value[1]
  )
  stationFestivalLast5Ref.value.init({
    top5: last5,
    stationFestivalX: last5.map((ele) => ele.name),
    avgTop5: avgLast5,
    startColor: '#6B5FF5',
    endColor: '#8496FF',
    isLast: true
    // isAverage: true
  })
}

function handleJobKeyTopLast5() {
  const top5 = keyJobTop5
    .filter(
      (ele) =>
        ele.commonType == jobKeyCommontType.value && ele.stationFestivalType == jobKeyType.value
    )
    .sort((a, b) => a.value - b.value)
  const avgTop5 = keyJobLast5Avg.find(
    (ele) =>
      ele.commonType == jobKeyCommontType.value && ele.stationFestivalType == jobKeyType.value
  )
  jobKeyTop5Ref.value.init({
    top5,
    stationFestivalX: top5.map((ele) => ele.name),
    avgTop5
  })

  const last5 = keyJobLast5
    .filter(
      (ele) =>
        ele.commonType == jobKeyCommontType.value && ele.stationFestivalType == jobKeyType.value
    )
    .sort((a, b) => a.value - b.value)
  const avgLast5 = keyJobTop5Avg.find(
    (ele) =>
      ele.commonType == jobKeyCommontType.value && ele.stationFestivalType == jobKeyType.value
  )
  jobKeyLast5Ref.value.init({
    top5: last5,
    stationFestivalX: last5.map((ele) => ele.name),
    avgTop5: avgLast5,
    startColor: '#6B5FF5',
    endColor: '#8496FF',
    isLast: true
  })
}

// 价格趋势
const activePriceTrend = ref('shuini')
const RepPriceTrendLineRef = ref()
function handlePriceTrend() {
  RepPriceTrendLineRef.value.init(priceTrendData[activePriceTrend.value])
}
// 六价对比
const seamlessScroll = ref()
const sexPriceTableKey = ref(0)
const isScroll = ref(false)
const activeSexPrice = ref('gangjin')
const sexPriceTable = ref([...sexPriceData.gangjin])
function handleSexPrice() {
  isScroll.value = false
  sexPriceTable.value = sexPriceData[activeSexPrice.value]
  sexPriceTableKey.value++
  nextTick(() => {
    isScroll.value = true
  })
  console.log('sex', sexPriceTable.value)
}
</script>
<style scoped lang="scss">
.data-board {
  .overview-panel {
    width: 100%;
    height: 300px;
    padding: 30px;
    background: #fff;
    border-radius: 2px;

    .overview-item::after {
      position: absolute;
      top: 0;
      right: 30px;
      bottom: 0;
      width: 1px;
      background: rgb(230 237 240 / 60%);
      content: '';
    }

    .overview-item.last::after {
      background: transparent;
      content: '';
    }

    .overview-item.after0::after {
      right: 0;
    }

    .overview-item {
      position: relative;

      .overview-title.p80 {
        padding: 0 80px;
      }

      .overview-title {
        padding-left: 50px;
        margin-bottom: 20px;

        .title {
          height: 20px;
          padding-left: 20px;
          font-size: 24px;
          line-height: 0;
          color: #3488ff;
          text-align: left;
          background: url('./img/title-bg.png') no-repeat left / 90px 100%;
        }

        .total-rate {
          padding: 0 14px;
          font-size: 18px;
          color: #333;
          background: rgb(242 250 255 / 80%);
          border-radius: 54px;
        }
      }

      .overview-list {
        display: flex;
        padding-bottom: 16px;
        padding-left: 40px;

        .label {
          font-size: 18px;
          color: #666;
        }

        .label.width90 {
          width: 90px;
          text-align: right;
        }

        .value {
          font-size: 20px;
          line-height: 1.2;
          color: #333;
        }

        .react {
          width: 6px;
          height: 6px;
          margin: 0 10px 0 6px;
          background: #3488ff;
          box-shadow:
            0 0 0 4px white,
            0 0 0 6px #3488ff;
        }

        .value.active {
          color: #3488ff;
        }
      }
    }
  }

  .chart-panel {
    padding: 30px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 2px;

    .chart-item {
      width: 50%;
      height: 200px;
    }
  }

  .chart-item {
    width: 100%;
    height: 200px;
    margin-top: 40px;
  }

  .sexprice-table {
    font-size: 14px;
    line-height: 40px;
    color: #333;

    .sexprice-header {
      height: 40px;
      padding: 0 20px;
      font-size: 14px;
      color: #666;
      background: #eef3ff;
    }

    .flex1 {
      width: 100px;
    }

    .flex15 {
      width: 150px;
    }

    .scroll {
      position: relative;
      width: 100%;
      height: 160px;
      overflow: hidden;
    }

    .scroll-item {
      width: 100%;
      height: 40px;
      padding: 0 20px;
      line-height: 40px;
      border-bottom: 1px solid #dfe4f3;
    }
  }
}
</style>
